<template>
    <div class="personGate">


        <div class="searchPart">
            <SectionTitle text="人员信息查询"></SectionTitle>
            <div class="search">
                <van-search v-model="key" show-action placeholder="姓名或工号" @search="onSearch">
                    <template #action>                        
                          <van-button @click="onSearch"   type="primary">搜索</van-button>
                    </template>
                </van-search>
            </div>

            <van-dropdown-menu auto-locate>
                <van-dropdown-item v-model="value1" :options="option1" teleport="body" @change="handleSelectChange" />
                <van-dropdown-item v-model="value2" :options="option2" teleport="body" @change="handleSelectChange" />
                <van-dropdown-item v-model="value3" :options="option3" teleport="body" @change="handleSelectChange" />
            </van-dropdown-menu>

        </div>


        <div class="searchResult">

            <van-empty description="未查询到人员信息" v-if="nodata" />


            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="!nodata">

                <div class=" asynDate" v-if="asynDate" style="margin-top: 10px;margin-bottom: -2px;">
                    数据更新日期：{{ asynDate }}<br/>
                    <span class="asynDateDesc">按姓氏笔画排序</span>
                </div>


                <van-list class="carInfoList" v-model:loading="loading" :finished="finished" finished-text="没有更多了"
                    @load="onLoad">
                    <ColorItem color="#FFA000" class="searchItem" :colorBorder="false" v-for="cardInfo in carInfoList">
                        <PersonInfoItem :value="cardInfo" link />
                    </ColorItem>
                </van-list>
            </van-pull-refresh>

        </div>

    </div>

    <van-popup v-model:show="showDetail" closeable position="bottom" :style="{ height: '70%' }" teleport="body" round>
        <div class="personGateLogs">
            <div class="personGateLogsTitle">行人进出校记录</div>
            <PersonGateLog :staffId="staffId" />
        </div>
    </van-popup>

</template>
<script lang="ts" setup>
import ColorItem from '@/components/ColorItem.vue';
import http from '@/api/request'
import SectionTitle from '@/components/SectionTitle.vue';
import { showToast } from 'vant';
import { onMounted, ref } from 'vue';
import { type PersonQueryResult, type PersonInfo } from '@/types/common';
import PersonInfoItem from '@/components/PersonInfoItem.vue';
import { useRouter } from 'vue-router';
import PersonGateLog from './person/personGateLog.vue';
import { saveLog } from '@/api/queryLog';

const nodata = ref(false);
const key = ref('')
const carInfoList = ref<PersonInfo[]>([]);
const asynDate = ref('')
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false);
const router = useRouter();
const showDetail = ref(false)
const staffId = ref('')

const value1 = ref('0');
const value2 = ref('0');
const value3 = ref('0');
var pageNo = 1;

const option1 = [
    { text: '职务级别', value: '0' },
    { text: '校领导', value: '3' },
    { text: '正职', value: '1' },
    { text: '副职', value: '2' },
];
const option2 = [
    { text: '学历', value: '0' },
    { text: '研究生毕业', value: '11' },
    { text: '大学毕业', value: '21' },
    { text: '专科毕业', value: '31' },
    { text: '中专毕业', value: '41' },
    { text: '技校毕业', value: '51' },
    { text: '高中毕业', value: '61' },
    { text: '初中毕业', value: '71' },
];

const option3 = [
    { text: '政治面貌', value: '0' },
    { text: '中共党员', value: "01" },
    { text: '中共预备党员', value: '02' },
    { text: '共青团员', value: '03' },
    { text: '群众', value: '13' },
    { text: '民主党派', value: '20' },
];

const onSearch = () => {
    if (key.value == '') {
        showToast('请输入关键字')
        return;
    }

    pageNo = 1;


    saveLog("查询人员", 'tab_person', key.value)

    getList();
}

const handleSelectChange = () => {
    pageNo = 1;
    getList();
}


onMounted(() => {
    pageNo = 1;
    getList();
})

const handleClick = (item: PersonInfo) => {
    //router.push('/query/person/personDetail?id='+item.STAFF_ID);
    if (item.STAFF_ID) staffId.value = item.STAFF_ID;
    showDetail.value = true;

    if (item.STAFF_ID) saveLog("点击人员信息", 'tab_person_item_click', item.STAFF_ID)

}

const getList = () => {
    http.get<PersonQueryResult>('/query/queryPerson/', {
        key: key.value, pageNo,
        query1: value1.value,
        query2: value2.value,
        query3: value3.value,
    }).then((resp) => {
        loading.value = false;
        refreshing.value = false;
        nodata.value = false;
        

        if (pageNo == 1) carInfoList.value = [];
        if (resp.data?.asynDate) asynDate.value = resp.data?.asynDate;
        var result = resp.data?.personList;
        if (result && result.length > 0) {
            nodata.value = false;
            carInfoList.value = carInfoList.value.concat(result);
        } else {
            if (pageNo == 1) nodata.value = true;
            finished.value = true;
        }

    })
}

const onLoad = () => {
    if (pageNo == 1 && carInfoList.value.length == 0) { //初始化，不加载
        loading.value = false;
        return;
    }

    pageNo++;
    getList();
}

const onRefresh = () => {
    pageNo = 1;
    finished.value = false;
    getList();
}

</script>

<style lang="less" scoped>
.personGate {

    min-height: 100vh;



    .searchPart {
        margin-top: 60px;
        background-color: #fff;

        padding: 10px;
        padding-bottom: 0;

        .search {
            margin-top: 10px;
        }
    }

    .searchResult {


        .sectionTitleWrapper {
            margin-top: 2px;
            background-color: #fff;
            padding: 10px;
        }


        .subSection {
            line-height: 30px;
        }

        .carInfoList {
            padding: 10px;

            .searchItem {
                margin-bottom: 10px;
                background-color: #fff;
            }
        }
    }


    .searchSummary {
        font-size: 14px;
        padding: 10px;
        padding-bottom: 0;
        text-align: center;
    }

    .searchTip {
        background-color: #fff;
        min-height: 100vh;
    }
}

.personGateLogs {
    .personGateLogsTitle {
        font-size: 16px;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

.sortTip{
    background-color: rgba(10, 67, 255, 0.082);
    text-align: left;
    margin-top: 20px;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
    margin:20px 20px 0px;
}
</style>

<style>
.personGate .van-search__content {
    border-radius: 0;
    border: 1px solid #004e9b;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: none;
}

.personGate .van-search__field {
    height: 42px;
}

.personGate .van-search__action {
    padding-left: 0;
}

.personGate .van-search__action .van-button {
    border-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
</style>